<template>
	<div class="login_container">
		<div class="login_box">
			<div class="avatar_box">
				<img src="../assets/img/logo.png" alt="" />
			</div>
			<!-- 登录表单 -->
			<el-form
				label-width="0px"
				class="login_form"
				:model="loginForm"
				:rules="loginFormRules"
				ref="loginFormRef"
			>
				<!-- 用户名 -->
				<el-form-item prop="username">
					<el-input
						placeholder="请输入用户名"
						prefix-icon="iconfont icon-user"
						v-model="loginForm.username"
					>
					</el-input>
				</el-form-item>
				<!-- 密码 -->
				<el-form-item prop="password">
					<el-input
						placeholder="请输入密码"
						prefix-icon="iconfont icon-3702mima"
						show-password
						v-model="loginForm.password"
					></el-input>
				</el-form-item>
				<el-form-item class="btn">
					<el-button type="primary" @click="login">登录</el-button>
					<el-button type="info" @click="resetLoginForm">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			loginForm: {
				username: 'admin',
				password: '123456',
			},
			// 验证
			loginFormRules: {
				username: [
					{
						required: true,
						message: '请输入用户名',
						trigger: 'blur',
					},
					{
						min: 3,
						max: 10,
						message: '长度为3到10字符',
						trigger: 'blur',
					},
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur',
					},
					{
						min: 6,
						max: 15,
						message: '长度为6到15字符',
						trigger: 'blur',
					},
				],
			},
		}
	},
	methods: {
		resetLoginForm() {
			this.$refs.loginFormRef.resetFields()
		},
		// 登录验证
		login() {
			this.$refs.loginFormRef.validate(async (valid) => {
				if (!valid) return
				// 直接获取返回的data数据
				const { data: res } = await this.$http.post('login', this.loginForm)
				if (res.meta.status != 200) {
					return this.$message.error('登录失败')
				}
				this.$message({
					message: '登录成功',
					type: 'success',
				})
				// 将登录成功后的token，保存到客户端的sessionStorage中
				window.sessionStorage.setItem('token', res.data.token)
				// 项目中除了登录之外的api接口，必须在登录后才能访问
				// token只应在当前网站打开期间生效，所以将token保存在sessionStorage中
				// 通过编程导航跳转到后台主页，路由地址是/home
				this.$router.push('/home')
			})
		},
	},
}
</script>

<style lang="less" scoped>
.login_container {
	background-color: #2b4b6b;
	height: 100%;
	.login_box {
		position: relative;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 450px;
		height: 300px;
		background-color: #fff;
		border-radius: 3px;
		.avatar_box {
			position: absolute;
			left: 50%;
			transform: translate(-50%, -50%);
			height: 130px;
			width: 130px;
			border: 1px solid #eee;
			border-radius: 50%;
			padding: 5px;
			box-shadow: 0 0 10px #eee;
			background-color: white;
			img {
				height: 100%;
				width: 100%;
				border-radius: 50%;
				background-color: #eee;
			}
		}
		.btn {
			display: flex;
			justify-content: flex-end;
		}
		.login_form {
			position: absolute;
			bottom: 0px;
			width: 100%;
			padding: 0px 10px;
			// 盒模型
			box-sizing: border-box;
		}
	}
}
</style>